import { TabBar } from 'antd-mobile';
import { connect } from 'dva';
import router from 'umi/router';
import withRouter from 'umi/withRouter';
import indexIconSrc from 'src/assets/index1.png';
// import indexIconSrc from 'src/assets/index.svg';
import pastureIconSrc from 'src/assets/pasture.png';
import muniurenIconSrc from 'src/assets/muniuren.png';
import moreIconSrc from 'src/assets/more.svg';
import selectedIndexIconSrc from 'src/assets/index-selected.png';
import selectedPastureIconSrc from 'src/assets/pasture-selected.png';
import selectedMuniurenIconSrc from 'src/assets/muniuren-selected.png';
import selectedMoreIconSrc from 'src/assets/more-selected.svg';
import styles from './mainTab.less';

function MainTab(props) {
  const { tabConponentList } = props;
  console.log('TCL: MainTab -> tabConponentList', tabConponentList);
  let First = tabConponentList[0];
  let Second = tabConponentList[1];
  let Third = tabConponentList[2];
  let Fourth = tabConponentList[3];

  const OnPress = tabName => {
    if(tabName === 'activity'){
      router.push(`/layout/activity?tabName=pasture`);
    }else{
      if (props.location.pathname === '/index') {
        props.dispatch({
          type: 'index/changeTab',
          playload: tabName
        });
      } else {
        router.push(`/?tabName=${tabName}`);
      }
    }
  };

  return (
    <div>
      <div
        style={{
          position: 'fixed',
          height: '100%',
          width: '100%',
          top: 0
        }}
      >
        <TabBar unselectedTintColor="#949494" tintColor="red" barTintColor="white">
          <TabBar.Item
            title="首页"
            key="main"
            icon={<img className={styles.tabIcon} src={indexIconSrc} />}
            selectedIcon={<img className={styles.tabIcon} src={selectedIndexIconSrc} />}
            selected={props.index.selectedTab === 'main'}
            // badge={1}
            onPress={() => OnPress('main')}
            data-seed="logId"
          >
            {First}
          </TabBar.Item>
          <TabBar.Item
            icon={<img className={styles.tabIcon} src={pastureIconSrc} />}
            selectedIcon={<img className={styles.tabIcon} src={selectedPastureIconSrc} />}
            title="活动"
            key="pasture"
            // badge={'new'}
            selected={props.index.selectedTab === 'pasture'}
            onPress={() => OnPress('activity')}
            data-seed="logId1"
          >
            {Second}
          </TabBar.Item>
          <TabBar.Item
            icon={<img className={styles.tabIcon} src={muniurenIconSrc} />}
            selectedIcon={<img className={styles.tabIcon} src={selectedMuniurenIconSrc} />}
            title="我的"
            key="muniuren"
            // dot
            selected={props.index.selectedTab === 'muniuren'}
            onPress={() => OnPress('muniuren')}
          >
            {Third}
          </TabBar.Item>
          <TabBar.Item
            icon={<img className={styles.tabIcon} src={moreIconSrc} />}
            selectedIcon={<img className={styles.tabIcon} src={selectedMoreIconSrc} />}
            title=""
            key="More"
            selected={props.index.selectedTab === 'more'}
            onPress={() => OnPress('more')}
          >
            {Fourth}
          </TabBar.Item>
        </TabBar>
      </div>
    </div>
  );
}

export default withRouter(
  connect(state => ({
    index: state.index
  }))(MainTab)
);
